﻿html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,input,select{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;  color:#2d2d2d; font-family: Arial, Tahoma; }body{line-height:normal;}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
* {
    transition: 0.5s color,0.5s border-color, 0.5s background, 0.5s background-image;
    -moz-transition: 0.5s color,0.5s border-color, 0.5s background, 0.5s background-image;
    -webkit-transition: 0.2s color,0.5s border-color, 0.5s background, 0.5s background-image;
    -o-transition: 0.5s color,0.5s border-color, 0.5s background, 0.5s background-image;
    -ms-transition: 0.5s color,0.5s border-color, 0.5s background, 0.5s background-image;
}

html {   background: url(bg.jpg) no-repeat center center fixed;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;  }

#swapper-page{margin: 9px; float:left; border-radius: 3px; position:relative; box-shadow: 0 1px 5px rgba(0,0,0,.4) }
#swap-bartop{background:url(bg-bartop.png) repeat-x 0 0 ;color: #fff; margin-left:-1px; position: relative;position: relative; height:70px; width: 100%;top: 0;z-index: 10; border-radius: 3px 3px 0 0; box-shadow: 0 1px 1px rgba(0,0,0,.6)}
#swap-bartop .system{float:right; height:70px; display:block;}
#swap-bartop .system .user{height:70px; background: url(line-system.png) no-repeat right 0; padding: 0 20px 0 0; margin-right: 20px; float:left;}
#swap-bartop .system .user a.account{ color:#5c5c5c;  background: url(icon-sys.png) no-repeat -3px -50px; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,.5); font-size: 12px; padding: 5px 0 5px 25px; display:block; float:left; margin-top: 20px;}
#swap-bartop .system .user a.account span{font-weight:bold; text-decoration: underline; color:#828282;}
#swap-bartop .system a.logout
{
   background: #dad5db;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efeef4), to(#dad5db));
  background-image: -webkit-linear-gradient(top, #efeef4, #dad5db);
  background-image: -moz-linear-gradient(top, #efeef4, #dad5db);
  background-image: -ms-linear-gradient(top, #efeef4, #dad5db);
  background-image: -o-linear-gradient(top, #efeef4, #dad5db);
  background-image: linear-gradient(to bottom, #efeef4, #dad5db); float:left; width: 25px; height: 25px; border-radius: 2px; display:block; position:relative; margin: 20px 20px 0 0; box-shadow: 0 0 1px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.7) ,inset 0 -1px 1px rgba(0,0,0,.05) ;    
 }
#swap-bartop .system a.logout:hover
{
    background:#868586; box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.6); 
    }
#swap-bartop .system a.logout span{display:block; width: 25px; height:25px; background: url(icon-sys.png) no-repeat 0 0}
#swap-bartop .system a.logout:hover span{background-position: 0 -25px;}
#swap-content{position:relative; z-index:5; background: url(bg-op.png); float:left; clear:both; border-radius: 0 0 3px 3px; overflow-y:auto;}
.col-left{width:250px; padding: 20px 0px 20px 20px; float:left; position:relative;}
.col-left .box-form{width:250px; position:relative; }
.col-left .box-form .content{ position: relative;background: #fff; float:left; display:block; border-radius: 2px 2px 1px 1px; box-shadow: 0 0 1px rgba(0,0,0,.6), 0 2px rgba(0,0,0,.1);   }
/*.col-left .box-form .content::before {
    content: "";
    width: 244px;
    height: 3px;
    display: block;
    position: absolute; 
    z-index: -1;
    background-color: #fff;
    bottom: -3px;
    left:3px;
    box-shadow: 0 0 1px rgba(0,0,0,.5), 0 2px rgba(0,0,0,.1);
}   
.col-left .box-form .content::after {
    content: "";
    width: 242px;
    height: 2px;
    display: block;
    position: absolute; 
    z-index: -2;
    background-color: #fff;
    bottom: -5px;
    left:4px;
    box-shadow: 0 0 1px rgba(0,0,0,.7), 0 2px rgba(0,0,0,.05);
}*/
.col-left .box-form .content .title{background: url(title-left.png) repeat-x 0 0; width:240px; padding-left:10px; margin-bottom:5px ; border-radius: 2px 2px 0 0; line-height: 39px; height:39px; font-family:MyFontBold; text-transform: uppercase; color:#fff; font-size:15px; text-shadow: 0 1px rgba(0,0,0,.2); box-shadow: inset 0 1px rgba(255,255,255,.3)}
.col-left .box-form .content ul.from{width: 240px; margin:0px 0 10px 10px; float:left; padding:0; list-style: none; overflow-y:auto; overflow-x:hidden;}
.col-left .box-form .content ul.from li{width:230px; position:relative; float:left; clear:both; margin-top:10px;}

.col-right{ margin: 20px 0px 20px 20px; float:left;}
.col-right .title-right{font-family: MyFontBold, Tahoma;  margin-right: 10px; font-weight: bold; float: right; color: #FF5F13; box-shadow: 0 0 1px rgba(0,0,0,.7); border-radius:2px; background: #fff url(bg_main_button.png) repeat-x 0 center;  float:right; font-size:15px; text-transform:uppercase; line-height:1em; text-shadow: 0 1px rgba(255,255,255, .6); padding: 8px 10px 10px 48px; position:relative; }
.col-right .title-right span{width: 30px; height:26px; padding: 7px 0 0 10px; position:absolute; top:0px; left:0; background: url(arrow.png) no-repeat right center; color:#505050; font-size: 16px; margin-right:8px; display:block; float:left;  }

.col-right ul.button{display:block; float:left; list-style: none; margin:  0 0 0;}
.col-right ul.button li{float:left; margin: 0px 10px 20px 0;}
.col-right ul.button li a{text-decoration: none; height:34px; line-height:34px; display:block; padding: 0 10px 0 22px; ; border-radius: 3px; color:#505050;  text-shadow: inset 0 0 1px rgba(0,0,0, .6); text-transform:uppercase; font-size:12px;font-weight: bold; font-family: MyFontBold, Tahoma; box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 1px rgba(255,255,255, .7);}
.col-right ul.button li a span{float:left; display:block; text-shadow: 0 1px rgba(255,255,255,.2); color: rgba(0,0,0,.5);  vertical-align:middle; width:13px; margin: 0px; border: 1px solid rgba(0,0,0,0);  text-align:center; }
.col-right ul.button li a:hover{color:#FF5F13}
.col-right ul.button li .textbox{width:120px; padding:3px ; margin: 3px 0 0 0; background:#fff; font-size:12px; border: 1px solid #adadad; float:left; border-radius:2px; box-shadow: inset 0 1px rgba(0,0,0,.05); }

.col-right .swap-product{width: 100%; overflow:hidden;-ms-box-sizing: border-box; background:#f6f6f6; float:left; clear:both; box-shadow: 0 0 2px rgba(0,0,0,.4); border-radius: 3px; margin-top:0px;}
.col-right .swap-product .list-grid{width:100%; background:#fff; float:left; clear:both; border-radius:3px; margin:0; padding:0; position:relative; z-index:1; border-top: 3px solid #ff8a00; box-shadow: 0 1px rgba(0,0,0,.15)}
.col-right .swap-product .list-grid th{background:url(bg-th-list-products.png) repeat-x 0 bottom; text-align:left; border-right: 1px solid #d9d9d9; padding: 8px 10px 10px 10px; text-shadow: 0 1px rgba(255,255,255, .7);  box-shadow: 0 1px rgba(0,0,0,.05); font-size:12px; font-family: MyFontBold; text-transform:uppercase; font-weight:normal; position:relative; z-index:2; border-top: 1px solid #d9d9d9;}
.col-right .swap-product .list-grid th:last-child{border-right: none;}
.col-right .swap-product .list-grid th a{text-decoration:none;}
.col-right .swap-product .list-grid td{padding: 5px 10px 5px 10px; font-size:12px;  border-bottom: 1px solid #d9d9d9;border-right: 1px solid #d9d9d9; position:relative; z-index:1;}
.col-right .swap-product .list-grid td.name{font-weight:bold; color:#f26e10;}
.col-right .swap-product .list-grid tr:last-child td{border-bottom: none;}
.col-right .swap-product .list-grid tr:last-child td:first-child{border-radius: 0 0 0 3px;}
.col-right .swap-product .list-grid tr:last-child td:last-child{border-radius: 0 0 3px 0;}
.col-right .swap-product .list-grid tr td:last-child{border-right: none; font-weight:bold;}
.col-right .swap-product .list-grid td a.delete{width:16px; padding:4px 0 0 4px; height:16px; display:inline-block; font-size:12px; background:#e0363b; border-radius:2px; box-shadow: inset 0 1px rgba(255,255,255,.2);  color:rgba(0,0,0,.6); text-shadow: 0 1px rgba(255,255,255,.15); cursor:pointer;}
.col-right .swap-product .list-grid td a.delete:hover{background:#ed6f72}
.col-right .swap-product .list-grid td a.update{width:16px; padding:4px 0 0 4px; height:16px; display:inline-block; margin:0 0 0 2px; font-size:12px; background:#4297ff; border-radius:2px; box-shadow:inset 0 1px rgba(255,255,255,.2);  color:rgba(0,0,0,.6); text-shadow: 0 1px rgba(255,255,255,.15); cursor:pointer;}
.col-right .swap-product .list-grid td a.update:hover{background:#7fb0ed}
.col-right .swap-product .list-grid tfoot td{ font-weight:bold; font-family: MyFontBold; text-transform:uppercase; font-size:15px; background:#ff8a00; border-right: 1px solid rgba(0,0,0,.2); padding-top:5px; padding-bottom:7px; text-shadow: 0 1px rgba(255,255,255,.2); }

.col-right .swap-product .list-grid tr:nth-of-type(even) td{background:#fff4d7;}
.col-right .swap-product .list-grid .right{text-align:right;}

.col-right .swap-product .list-update{width:100%; background:#fff; float:left; clear:both; border-radius:3px; margin:0; padding:0; position:relative; z-index:1; border-top: 3px solid #ff8a00; box-shadow: 0 1px rgba(0,0,0,.15)}
.col-right .swap-product .list-update td{padding: 5px 10px 5px 10px; font-size:12px;  border-bottom: 1px solid #d9d9d9;border-right: 1px solid #d9d9d9; position:relative; z-index:1;}
.col-right .swap-product .list-update .textbox{width:120px; padding:3px ; margin: 3px 0 0 0; background:#fff; font-size:12px; border: 1px solid #adadad; float:left; clear:both; border-radius:2px; box-shadow: inset 0 1px rgba(0,0,0,.05); }
.col-right .swap-product .list-update .combobox{padding:3px ; margin: 3px 0 0 0; background:#fff; font-size:12px; border: 1px solid #adadad; float:left; border-radius:2px; box-shadow: inset 0 1px rgba(0,0,0,.05); }
.col-right .swap-product .list-update .button{padding:3px ; margin: 3px 0 0 3px; font-size:12px; border: 1px solid #adadad; float:left; border-radius:2px; box-shadow: inset 0 1px rgba(0,0,0,.05); }



.modalBackground
{
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.modalPopup
{
    background-color: #FFFFFF;
    width: 700px;
    border: 3px solid #0DA9D0;
    padding: 0;
}
.modalPopup .header
{
    background-color: #2FBDF1;
    height: 30px;
    color: White;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
}
.modalPopup .body
{
    min-height: 50px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
}